<template>
  <div class="index">
    <!-- 公共组件 -->
    <Search />
    <MainNavList />
    <!-- 推荐页面 -->
    <div class="recommedPage">
      <!-- 轮播图区域 -->
      <Carousel :carouselImg="carousel" :preSaleList="preSaleList" />
      <!-- 新书上市 -->
      <div class="newBook">
        <h3 class="newBook-text">新书上市</h3>
        <button class="newBook-btn" v-if="select" @click="handleSelect">
          &gt;
        </button>
        <button class="newBook-btn" v-else @click="handleSelect">&lt;</button>
      </div>
      <!-- 新书上市各种书籍 -->
      <NewBookComtent :select="select" :newBookComtent="newBookComtent" />
      <!-- 每周特价 -->
      <div class="titleBook">
        <h3 class="titleBook-text">每周特价</h3>
      </div>
      <!-- 每周特价各种书籍 -->
      <WeeklySpecial :weeklyList="weeklyList" />

      <!-- 热门图书 -->
      <div class="titleBook">
        <h3 class="titleBook-text">热门图书</h3>
      </div>
      <!-- 热门图书各类书籍 -->
      <PopularBooks :popList="popList" />
    </div>
    <!-- 脚注区域 -->
    <Footer />
  </div>
</template>

<script>
import Carousel from './Carousel/Carousel'
import NewBookComtent from './NewBookComtent/NewBookComtent'
import WeeklySpecial from './WeeklySpecial/WeeklySpecial'
import PopularBooks from './PopularBooks/PopularBooks'
import Footer from '../../components/Footer'
import MainNavList from '../../components/MainNavList'
import Search from '../../components/Search'

import '../../assets/less/oneBook.less'

// 请求
import API from '../../API/recommendPage'

export default {
  name: 'RecommedPage',
  data() {
    return {
      select: true,
      carousel: [],
      newBookComtent: [],
      popList: [],
      weeklyList: [],
      preSaleList: []
    }
  },
  async mounted() {
    //获取请求轮播图大图的数据
    const carousel = (await API.reqGetCarouselBigImg()).banners
    // console.log('carousel', carousel)
    this.carousel =Object.freeze(carousel)

    //获取新书上市的数据
    const newBookComtent = (await API.reqGetNewBookComtent()).bookItems
    // console.log('newBookComtent', newBookComtent)
    this.newBookComtent =Object.freeze(newBookComtent)

    // 获取请求热门图书、每周特价、预售的数据
    const getRecommendPageText = (await API.reqGetRecommendPageText())
      .blockContents
    // console.log("getRecommendPageText",getRecommendPageText)
    const RecommendPageText = getRecommendPageText.map((item) => {
      return item.tag.bookItems
    })
    const bookItems =Object.freeze(RecommendPageText.slice(0, 3))
    this.popList = bookItems[0]
    this.weeklyList = bookItems[1]
    this.preSaleList = bookItems[2]
    // console.log("bookItems",bookItems)
  },
  methods: {
    handleSelect() {
      this.select = !this.select
    }
  },
  components: {
    Carousel,
    NewBookComtent,
    WeeklySpecial,
    PopularBooks,
    Footer,
    MainNavList,
    Search
  }
}
</script>

<style lang="less" scoped>
.index {
  position: relative;
  /*  .nav-top {
    position: fixed;
    width: 100%;
    height: 56px;
    background-color: pink;
    top: 0;
    z-index: 99999;
  } */
  /* .nav-left {
    position: fixed;
    height: 100%;
    width: 150px;
    background-color: rgb(216, 209, 210);
    top: 0;
    left: 0;
  } */
  .recommedPage {
    width: 1080px;
    height: 100%;
    // border: 1px solid red;
    margin-left: 20%;
  }
  .newBook {
    width: 100%;
    height: 26px;
    margin: 20px 0;
    // border: solid 1px green;
    align-items: center;
    display: flex;
    justify-content: space-between;
    .newBook-text {
      font-size: 18px;
    }
    .newBook-btn {
      width: 26px;
      height: 26px;
      background-color: #f6f9fb;
      border-radius: 50%;
      font-size: 16px;
      text-align: center;
      outline: none;
      border: none;
    }
  }
  .titleBook {
    width: 100%;
    height: 26px;
    line-height: 26px;
    margin: 20px 0;
    // border: solid 1px green;
    .titleBook-text {
      font-size: 18px;
      text-align: left;
    }
  }
}
/* // footer
.footer {
  width: 100%;
  height: 285px;
  background-color: pink;
} */
</style>
